<template>
  <div class="recommend">
    <div class="iscroll">
      <IscrollView>
        <div>
          <banner :banners="banners"></banner>
          <personalized :personalized="personalized" :title="'推荐歌单'" @fatherset="fatherset" :type="'personalized'"></personalized>
          <personalized :personalized="albums" :title="'最新专辑'" @fatherset="fatherset" :type="'albums'"></personalized>
          <newsongs  :songs = 'songs'></newsongs>
        </div>
      </IscrollView>
    </div>
    <transition>
    <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import { getBanner, getPersonalized, getAlbum, getNewSong } from '../api/index'
import banner from '../components/Reconnmand/banner'
import personalized from '../components/Reconnmand/personalized'
import newsongs from '../components/Reconnmand/newsongs'
import IscrollView from '../components/IscrollView'
export default {
  name: 'Recommend',
  components: {
    banner,
    personalized,
    newsongs,
    IscrollView
  },
  methods: {
    fatherset (id, type) {
      this.$router.push({
        path: `/recommend/detile/${id}/${type}`
      })
    }
  },
  data: function () {
    return {
      banners: [],
      personalized: [],
      albums: [],
      songs: []
    }
  },
  created: function () {
    getBanner()
      .then((data) => {
        this.banners = data.banners
      })
      .catch(function (error) {
        console.log(error)
      })
    getPersonalized()
      .then((data) => {
        this.personalized = data.result
      })
      .catch(function (error) {
        console.log(error)
      })
    getAlbum()
      .then((data) => {
        this.albums = data.albums.splice(0, 6)
      })
      .catch(function (error) {
        console.log(error)
      })
    getNewSong()
      .then((data) => {
        // this.songs = data.result
        // console.log(data.result)
        const songList = data.result

        const list = []
        songList.forEach((value) => {
          const obj = {}
          obj.id = value.id
          obj.name = value.name
          let singer = ''
          for (let i = 0; i < value.song.artists.length; i++) {
            if (i === 0) {
              singer = value.song.artists[i].name
            } else {
              singer += '-' + value.song.artists[i].name
            }
          }
          obj.singer = singer
          obj.picUrl = value.song.album.picUrl
          list.push(obj)
        })
        this.songs = list
      })
      .catch(function (error) {
        console.log(error)
      })
  }
}
</script>

<style scoped lang="scss">
  .recommend{
    position: fixed;
    top: 184px;
    bottom: 0;
    left: 0;
    right: 0;
    /*overflow: hidden;*/
    .iscroll{
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  }
  .v-enter{
    transform: translateX(100%);
  }
  .v-enter-to{
    transform: translateX( 0%);

  }
  .v-enter-active{
    transition: transform 1s;
  }
  .v-leave{
    transform: translateX( 0%);
  }
  .v-leave-to{
    transform: translateX( 100%);
  }
  .v-leave-active{
    transition: transform 1s;
  }
</style>
